<template>
  <div class="amendUser public">
    <!-- 面包屑 -->
    <el-breadcrumb separator=">" class="crumbs">
        <el-breadcrumb-item :to="{ path: '/user'}">用户信息</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/amendUser'}">修改用户信息</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 添加用户的列表 -->
    <el-row  :gutter="20">
      <el-col :span="4">&emsp;</el-col>
      <el-col :span="16">
          <el-col :span="8" class="addUserInfo addUserInfoText">用户编号</el-col><el-col class="addUserInfo" :span="16"><el-input disabled v-model="code"></el-input></el-col>
          <el-col :span="8" class="addUserInfo addUserInfoText">用户账号</el-col><el-col class="addUserInfo" :span="16"><el-input disabled v-model="username"></el-input></el-col>
          <el-col :span="8" class="addUserInfo addUserInfoText">用户姓名</el-col><el-col class="addUserInfo" :span="16"><el-input @keyup.native="delSpace('realname')" placeholder="用户姓名为2-8位汉字" v-model="realname"></el-input></el-col>
          <el-col :span="8" class="addUserInfo addUserInfoText">职位</el-col>
          <el-col :span="16"  class="addUserInfo">
             <el-select v-model="position" placeholder="请选择" class="selectBox">
              <el-option v-for="item in positions":key="item.value":label="item.positionName":value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="8"  class="addUserInfo addUserInfoText">所属机构</el-col>
          <el-col :span="16"  class="addUserInfo">
            <el-select v-model="organ" placeholder="请选择"  class="selectBox">
              <el-option v-for="item in organList":key="item.value":label="item.name":value="item.id">
              </el-option>
            </el-select>
          </el-col>
      </el-col>
      <el-col :span="4">&emsp;</el-col>

    </el-row>
    <!-- 添加列表完成  以下是按钮 -->
    <el-row class="addUserBtn">
      <el-col :sm="9" :xs="6">&emsp;</el-col>
      <el-col :sm="3" :xs="6"><el-button type="primary" @click="saveNewUser">保存</el-button></el-col>
      <el-col :sm="3" :xs="6"><el-button @click='cancelSave'>取消</el-button></el-col>
      <el-col :sm="9" :xs="6">&emsp;</el-col>
    </el-row>
    <!-- 按钮完成  以下是针对保密信息的提交 -->
    <el-row  :gutter="20">
      <el-col :span="4">&emsp;</el-col>
      <el-col :span="16">
          <el-col :span="8" class="addUserInfo addUserInfoText">用户密码</el-col><el-col class="addUserInfo" :span="16"><el-input type='password' v-model="password" disabled placeholder="请输入内容"></el-input><el-button class="changeBtn" @click="dialogFormVisible = true">修改</el-button></el-col>
          <el-col :span="8" class="addUserInfo addUserInfoText">手机号码</el-col><el-col class="addUserInfo" :span="16"><el-input disabled placeholder="请输入内容" v-model="mobile"></el-input><el-button class="changeBtn" @click="change('tell')">修改</el-button></el-col>
          <el-col :span="8" class="addUserInfo addUserInfoText">电子邮箱</el-col><el-col class="addUserInfo" :span="16"><el-input disabled placeholder="请输入内容" v-model="email"></el-input><el-button class="changeBtn" @click="change('email')">修改</el-button></el-col>
      </el-col>
      <el-col :span="4">&emsp;</el-col>

    </el-row>
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
      <el-row>
        <el-col :span="24" class="margin_bottom">
          <el-col :offset='5' :span="4" class="amendPassword inquireText">新密码</el-col><el-col :span="10"><el-input @keyup.native="delSpace('newPassword1')" v-model="newPassword1" type='password' size="small" @blur="change('newPassword1')" @change="replaceSpace"></el-input></el-col>
        </el-col>
        <el-col :span="24" class="margin_bottom">
          <el-col :offset='5' :span="4" class="amendPassword inquireText">确认密码</el-col><el-col :span="10"><el-input @keyup.native="delSpace('newPassword2')" v-model="newPassword2" type='password' size="small"  @blur="change('newPassword2')"></el-input></el-col>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changePassword">确 定</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
export default {
  name: 'amendUser',
  data () {
    return {
      dialogFormVisible:false,
      amendPassword:"",
      password:'000000',
      positions: [],
      organList:[],
      position:'',
      organ: '',
      code:'',
      username:'',
      mobile:'',
      email:'',
      realname:'',
      newPassword1:'',
      newPassword2:''
    }
  },
  methods : {
    delSpace (str) {
      this[str]  = this[str].replace(/\s/g,"");
    },
    changePassword(){
      if(this.newPassword1.length >20 || this.newPassword1.length < 6){
        this.$message({type:'warning',message:'密码长度为6-20位',duration:1500,showClose:false});
        return
      }
      if(/\s+/g.test(this.newPassword1)){
        this.$message({
          message: '密码不能为空格',
          duration: 1500,
          showClose: true
        });
        return
        this.newPassword1 = '';
        this.newPassword2 = ''

      }
      if(this.newPassword1 != this.newPassword2){
        this.$message({type:'warning',message:'两次密码输入不一致，请重新输入',duration:1500,showClose:false})
        this.newPassword1 = '';
        this.newPassword2 = '';
        return
      }

      $.post(this._path + '/users/'+ this.$route.query.id +'/password/reset',{password:this.newPassword1},(res) => {
        if('SUCCESS' == res.code){
          this.$message({
            type: 'success',
            message: '密码修改成功',
            duration: 1500,
            showClose: true
          });
          this.dialogFormVisible = false;
          this.newPassword1 = '';
          this.newPassword2 = '';
        }else{
          this.$message({
            type: 'error',
            message: '密码修改失败',
            duration: 1500,
            showClose: true
          });
        }
      })
    },
    change (type) {
      if('tell' == type){
        this.$prompt('请输入新手机号码', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /^1[3|4|5|7|8][0-9]\d{4,8}$/,
          inputErrorMessage: '手机号码格式不正确'
        }).then(({ value }) => {
          // 发起修改电话的请求
          $.post(this._path + '/users/'+ this.$route.query.id +'/mobile',{mobile:value},(res) => {
            if('SUCCESS' == res.code){
              this.$message({
                type: 'success',
                message: '手机号码修改成功',
                duration: 1500,
                showClose: true
              });
              this.mobile = value
            }else{
              this.$message({
                type: 'error',
                message: '手机号码修改失败',
                duration: 1500,
                showClose: true
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消修改'
          });
        });
      }else if('email' == type){
        this.$prompt('请输入邮箱', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputErrorMessage: '邮箱格式不正确'
        }).then(({ value }) => {
          // 发起修改电话的请求
          $.post(this._path + '/users/'+ this.$route.query.id +'/email',{email:value},(res) => {
            if('SUCCESS' == res.code){
              this.$message({
                type: 'success',
                message: '邮箱修改成功',
                duration: 1500,
                showClose: true
              });
              this.email = value
            }else{
              this.$message({
                type: 'error',
                message: '邮箱修改失败',
                duration: 1500,
                showClose: true
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消修改'
          });
        });
      }else if('newPassword1'== type){
        if(this.newPassword1.length >20 || this.newPassword1.length < 6){
          this.$message({type:'warning',message:'密码长度为6-20位',duration:1500,showClose:false})
        }
      }else if('newPassword2'== type){
        if(this.newPassword1 != this.newPassword2){
          this.$message({type:'warning',message:'两次密码输入不一致，请重新输入',duration:1500,showClose:false})
          this.newPassword1 = '';
          this.newPassword2 = '';
        }
      }
    },
    saveNewUser () {
      if(this.realname.length < 2 || this.realname.length > 8){
        this.$message({
          type :'warning',
          message:'用户姓名长度不符',
          duration:1500,
          showClose:1
        })
        return
      }
      var params = {
        realname:this.realname,
        positionId:this.position,
        orgId: this.organ
      }
      $.post(this._path + "/users/" + this.$route.query.id,params,(data) => {
        if("SUCCESS" == data.code){
          this.$message({
            message: '修改成功',
            type: 'success',
            duration:1500,
            showClose:true
          });
          this.$router.push('/user')
        }else{
          this.requestError(res.this)
        }
      })

    },
    cancelSave() {
      this.$router.push('/user')
    }
  },
  beforeCreate () {
    $.get(this._path + '/users/' + this.$route.query.id,{},(res) => {
        if("SUCCESS" == res.code){
          this.code = res.data.user.code;
          this.username = res.data.user.username;
          this.mobile = res.data.user.mobile;
          this.email = res.data.user.email;
          this.realname = res.data.user.realname;
          this.position = res.data.user.position.id;
          this.organ = res.data.user.organization.id;
        }else{
          this.requestError(res.this)
        }
    })
    var params = {
      params: {
        userId : 1
      }
    }

    this.$http.get(this._path + '/organizations',params).then((res)=>{
      if("SUCCESS" == res.data.code){
        this.organList = res.data.data.organizations;
      }else{
        this.requestError(res.data,this)
      }

    })
    this.$http.get(this._path + '/positionManage',params).then((res)=>{
      if("SUCCESS" == res.data.code){
        this.positions = res.data.data.positions;
      }else{
        this.requestError(res.data,this)
      }

    })
  }
}
</script>

<style scoped lang="scss">
@import "./../style/amendUser.scss";
@import "./../style/public.scss";

</style>
